<template>
	<div class="list product">
		<div style="width: 58%;float: left;padding-right:1%;border-right: 1px solid #e1e1e1;" class="productInfo">
			<div class="head">
				<span v-if="!product_id">
					添加商品
				</span>
				<span v-else>编辑商品</span>
				<el-button type="primary" size="mini" @click="clearPro" >添加新商品</el-button>
				<el-button type="primary" size="mini"  @click="backRoute">返回</el-button>
			</div>

			<div class="item">
				<span>名称：</span>
				<el-input v-model="productData.title" clearable placeholder="请输入" @change="submitProduct.title=$event"></el-input>
			</div>
			<div class="item">
				<span>描述：</span>
				<el-input v-model="productData.description" clearable placeholder="请输入" @change="submitProduct.description=$event"></el-input>
			</div>
			<!-- <div class="item">
				<span>原价：</span>
				<el-input v-model="productData.o_price" clearable placeholder="请输入"@change="submitProduct.o_price=$event"></el-input>
			</div> -->
			<div class="item">
				<span>售价：</span>
				<el-input v-model="productData.price" clearable placeholder="请输入" @change="submitProduct.price=parseFloat($event)"></el-input>
			</div>
			<div class="item">
				<span>会员价：</span>
				<el-input v-model="productData.f_price" clearable placeholder="请输入" @change="submitProduct.f_price=parseFloat($event)"></el-input>
			</div>
			<div class="item">
				<span>库存：</span>
				<el-input v-model="productData.stock" clearable placeholder="请输入" @change="submitProduct.stock=parseInt($event)"></el-input>
			</div>
			<div class="item">
				<span>排序：</span>
				<el-input v-model="productData.listorder" clearable placeholder="请输入" @change="submitProduct.listorder=$event"></el-input>
			</div>
			<div class="item">
				<span>商品类别：</span>
				<!-- <el-select v-model="category_id" clearable placeholder="请选择" multiple >
					<el-option v-for="item in labelOptions" :key="item.id" :label="item.title" v-model="item.id">
					</el-option>
				</el-select> -->
        <!-- @change="productData.category_id = $event"-->
				<el-cascader v-model="productData.category_id" :options="labelOptions" :props="{ label: 'title',value:'id' }" @change="submitProduct.category_id = $event.join(',')"></el-cascader>
			</div>
			<div class="item itemTwo">
				<span>展示图：</span>
				<div class="upload" style="width: 50%;">
					<component :defaultValue="productData.mainImg" is="upload" @onChange="submitProduct.mainImg = $event.value">
					</component>
				</div>
			</div>
			<div class="item itemTwo">
				<span>轮播图：</span>
				<div class="upload" style="width: 50%;">
					<component :defaultValue="productData.bannerImg" is="upload" @onChange="submitProduct.bannerImg = $event.value">
					</component>
				</div>
			</div>
			<div class="item itemTwo">
				<span>详情描述：</span>
				<div class="upload" style="width: 80%;">
					<component :defaultValue="productData.content" is="tinymce-editor" @onChange="submitProduct.content = $event.value">
					</component>
				</div>
			</div>
			<div class="itemBtn">
				<el-button type="primary"  @click="productSubmit()">{{!product_id?'确认添加':'确认修改'}}</el-button>
			</div>
		</div>


		<div style="width: 40%;float: left;padding-left: 1%;height: 100%;box-sizing: border-box;" class="label">
			<!-- <div class="labelItem">
				<div class="head">SKU类别</div>
				<el-card class="box-card" style="margin-top: 20px;">
				  <el-input v-model="skuTitle" placeholder="请输入"></el-input>
				  <el-button type="danger" size="mini" @click="addSkuLabel(5)">添加</el-button>
				</el-card>
				<div style="padding-top: 10px;">
					<el-card class="box-card" v-for="(item,index) in skuLabelData" :key="index">
					  <div slot="header" class="clearfix" >
						<el-input v-model="item.title" placeholder="请输入名称" v-if="titleId==item.id"></el-input>
					    <span style="display: inline-block;width: 180px;" v-else>{{item.title}}</span>
					    <el-button type="success" icon="el-icon-check" circle plain v-if="titleId==item.id" @click="updateSkuLabel(item)"></el-button>
					    <el-button type="primary" icon="el-icon-edit" circle plain @click="titleId=item.id"></el-button>
					    <el-button type="danger" icon="el-icon-delete" circle plain @click="deleteCon(item.id,true)"></el-button>
					    <el-button type="info" :icon="add&&itemId==item.id?'el-icon-minus':'el-icon-plus'" circle plain @click="add=!add;itemId=item.id"></el-button>
						<el-input v-model="skuItemTit" placeholder="请输入子集名称" v-if="add&&itemId==item.id"></el-input>
					    <el-button type="success" icon="el-icon-check" circle plain v-if="add&&itemId==item.id" @click="addSkuLabel(6,item)"></el-button>
					  </div>
					  <div v-for="(v,i) in item.children" :key="i" class="text">
					    {{v.title}}<i class="el-icon-close" @click="deleteCon(v.id)"></i>
					  </div>
					</el-card>
				</div>
			</div> -->



			<div class="labelItem" style="border-top: 2px solid #E1E1E1;">
				<div class="head">商品SKU</div>
				<el-card class="box-card card2" style="margin-top: 20px;">
				    <div style="width:50%;float:left;padding-bottom:10px;">名称：<el-input v-model="submitSku.title" placeholder="请输入"></el-input></div>
				    <div style="width:50%;float:left;padding-bottom:10px;">价格：<el-input v-model="submitSku.price" placeholder="请输入"></el-input></div>
				    <div style="width:50%;float:left;padding-bottom:10px;">会员价格：<el-input v-model="submitSku.o_price" placeholder="请输入"></el-input></div>
				    <div style="width:50%;float:left;padding-bottom:10px;">库存：<el-input v-model="submitSku.stock" placeholder="请输入"></el-input></div>
				    <!-- <div style="width:50%;float:left;padding-bottom:10px;">一级返佣(%)：<el-input v-model="submitSku.one_level" placeholder="请输入"></el-input></div> -->
				    <!-- <div style="width:50%;float:left;padding-bottom:10px;">二级返佣(%)：<el-input v-model="submitSku.two_level" placeholder="请输入"></el-input></div> -->
				    <div style="width:60%;padding-top:20px;display: flex;">
					    展示图：
					    <div class="upload" style="width: 80%;">
					    	<component :defaultValue="submitSku.mainImg" is="upload" @onChange="submitSku.mainImg = $event.value">
					    	</component>
					    </div>
				    </div>
					<div style="width:40%;">
						<el-button type="danger" size="mini" @click="skuSubmit">{{submitSku.id?'编辑':'添加'}}</el-button>
					</div>
				</el-card>


				<div class="card3" style="padding-top: 10px;" v-if="skuData.length>0">
					<el-card class="box-card" >
						<div class="skuBox" v-for="(item,index) in skuData" :key="index">
							<div style="display: flex;align-items: center;">
								<el-image
								    style="width: 80px; height: 80px;"
								    :src="item&&item.mainImg&&item.mainImg[0]&&item.mainImg[0].url"
								    :preview-src-list="[item&&item.mainImg&&item.mainImg[0]&&item.mainImg[0].url]">
								</el-image>
								<div style="padding-left: 10px;text-align: left;">
									<div>{{item.title.substring(0,10)}}{{item.title.length>10?'...':''}}</div>
									<div style="padding: 5px 0;">￥{{item.price}}</div>
									<div style="padding: 5px 0;">会员价：￥{{item.o_price}}</div>
									<!-- <div>一级返：{{item.one_level}}% 二级返：{{item.two_level}}%</div> -->
									<div>库存：{{item.stock}}</div>
								</div>
							</div>
							<div style="font-size: 20px;color: #00B7EE;padding-top: 10px;">
								<i class="el-icon-edit" @click="submitSku=item"></i>&nbsp;&nbsp;&nbsp;&nbsp;
								<i class="el-icon-delete" @click="deleteSku(item)"></i>
							</div>

							<el-card class="box-card card2" style="position: absolute;width: 150%;left: 0;top: 100%;text-align: left;z-index: 10;" v-if="edit==item.id">
							    <div style="width:100%;padding-bottom:10px;">名称：<el-input v-model="editsku.title" placeholder="请输入"></el-input></div>
							    <div style="width:100%;padding-bottom:10px;">价格：<el-input v-model="editsku.price" placeholder="请输入"></el-input></div>
							    <div style="width:100%;padding-bottom:10px;">库存：<el-input v-model="editsku.stock" placeholder="请输入"></el-input></div>
							    <!-- <div style="width:100%;padding-bottom:10px;">一级返佣(%)：<el-input v-model="editsku.one_level" placeholder="请输入"></el-input></div> -->
							    <!-- <div style="width:100%;padding-bottom:10px;">二级返用(%)：<el-input v-model="editsku.two_level" placeholder="请输入"></el-input></div> -->
							    <div style="width:100%;padding-top:20px;display: flex;">
								    展示图：
								    <div class="upload" style="width: 80%;">
								    	<component :defaultValue="editsku.mainImg" is="upload" @onChange="imageChange4">
								    	</component>
								    </div>
							    </div>
								<div style="width:40%;">
									<el-button type="primary" plain size="small" @click="editSku(item)">确认</el-button>
									<el-button type="warning" plain size="small" @click="edit=0">取消</el-button>
								</div>
							</el-card>
						</div>
					</el-card>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	import productpageJs from './productpage.js'
	export default productpageJs
</script>
<style>


</style>
<style scoped="scoped">
  .content{overflow: hidden;}
	.list{height: 100%;}
	.product {
		text-align: left;
		/* overflow-y: auto; */
		height: 100%;
	}

	.product .productInfo{
		height: 100%;
		overflow-y: auto;
	}

	.product .labelItem{
		height: 100%;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.product .el-input {
		width: 60%;
	}

	.product .item {
		padding-top: 30px;
		display: inline-block;
		width: 48%;
	}

	.product .itemTwo {
		width: 100%;
	}

	.product .item span {
		font-size: 16px;
		display: inline-block;
		width: 100px;
		text-align: right;
	}

	.product .item input {
		height: 30px;
		line-height: 30px;
		padding: 0;
	}

	.product .item .el-checkbox-group{
		display: inline-block;
	}

	.product .upload {
		width: 29%;
		display: inline-block;
	}

	.product .el-textarea {
		width: 60%;
	}

	.product .itemBtn {
		padding: 40px 0 100px 100px;
	}

	.product .el-button {
		width: 180px;
	}

	.product .skuBox{
		text-align: center;
		width: 280px;
		background-color: #F5F5F5;
		border-radius: 5px;
		padding: 10px;
		display: inline-block;
		margin-right: 10px;
		position: relative;
		margin-bottom: 10px;
	}

	.product .card3 .el-card, .el-message{
		overflow: initial;
	}

	.product .label .el-button{
		width: initial;
	}
	.product .el-button.is-circle{
		width: 30px;height: 30px;padding: 0;
	}
	.product .box-card{
		margin-bottom: 10px;
	}
	.product .el-card__body{
		overflow: hidden;
	}
	.product .el-card__body .text{
		padding: 5px 8px;
		border: 1px solid #00B7EE;
		display: inline-block;
		border-radius: 5px;
		margin-right: 10px;
	}
	.product .el-card__body .el-icon-close{
		color: #00B7EE;
		margin-left: 10px;
	}
	.product .el-card__header .el-input{
		width: 150px;
	}

	.labelItem .card2  .el-input{
		width: 250px
	}
	.product .el-select{width: 50%;}


	.product .head {
		font-size: 24px;
		background-color: #f5f5f5;
		padding: 10px 20px;
		margin-top: 20px;
		border-left: 5px solid #1C2B36;
	}
	.product .head .el-button{
		width: 100px;
		float: right;
	}


	.productInfo::-webkit-scrollbar {
	    width: 10px;
	    height: 10px;
	}
	.productInfo::-webkit-scrollbar-thumb {
		transition: all 0.3s;
	    background-color: rgba(193, 193, 193, 0.3);
	    background-clip: padding-box;
	    border-width: 3px;
	    border-color: transparent;
	    border-style: solid;
	    border-radius: 5px;
	}
	.productInfo::-webkit-scrollbar-thumb:hover {
	    background-color: rgba(189, 189, 189, 0.5);
	    background-clip: border-box;
	}


	.labelItem::-webkit-scrollbar {
	    width: 10px;
	    height: 10px;
	}
	.labelItem::-webkit-scrollbar-thumb {
		transition: all 0.3s;
	    background-color: rgba(193, 193, 193, 0.3);
	    background-clip: padding-box;
	    border-width: 3px;
	    border-color: transparent;
	    border-style: solid;
	    border-radius: 5px;
	}
	.labelItem::-webkit-scrollbar-thumb:hover {
	    background-color: rgba(189, 189, 189, 0.5);
	    background-clip: border-box;
	}

</style>
